<template>
    <div class="edit-column">
        <n-button :strong="true" size="small" type="primary" @click="clickEditHandle">编辑</n-button>
        <n-button :strong="true" size="small" type="info" @click="editLitgraphHandle">蓝图</n-button>
        <n-button :strong="true" size="small" type="error" @click="clickDeleteHandle">删除</n-button>
        <n-button :strong="true" size="small" type="warning" @click="clickTestHandle">测试</n-button>
        <n-button :strong="true" size="small" type="default" @click="clickCopyHandle">复制</n-button>
    </div>
    <n-drawer v-model:show="isShowTestResult" :width="502" placement="left">
        <n-drawer-content title="请求测试结果">
            <UrlTest :datas="datas"></UrlTest>
        </n-drawer-content>
    </n-drawer>
</template>

<script>
import { Urls } from "../../../utils/Urls";
import { localStorageUtil } from "../../../utils/LocalStorageUtil";
import UrlTest from "./UrlTest.vue";
import { CpcDrawerCtrl } from "../../../components/CpcDrawer/CpcDrawerCtrl";
import AddOrEdit from "./AddOrEdit.vue";

export default {
    components: { UrlTest },
    props: {
        updateList: {
            type: Function,
        },
        editHandle: {
            type: Function,
        },
        datas: {
            type: Object,
        },
    },
    data() {
        return {
            isShowLitegraphEdit: false,
            isShowTestResult: false,
            isLoading: false,
            testResult: "",
        };
    },
    methods: {
        clickDeleteHandle() {
            window.$dialog.error({
                title: "警告",
                content: `确认删除${this.datas.path}吗？`,
                negativeText: "后悔了",
                positiveText: "别墨迹",
                onPositiveClick: async () => {
                    await window.$http.get(Urls.removeRouter, { params: { id: this.datas.id } });
                    window.$message.success("删除成功!");
                    this.updateList();
                },
            });
        },
        clickEditHandle() {
            CpcDrawerCtrl.open(
                {
                    component: AddOrEdit,
                    data: this.datas,
                    callBack: async (data, close) => {
                        await window.$http.post(Urls.updateRouter, data);
                        this.updateList();
                        window.$message.success("更新成功");
                        close();
                    },
                },
                { title: "编辑路由", styles: { width: "500px" }, isMaskEvent: false }
            );
        },
        clickCopyHandle() {
            const baseUrl = import.meta.env.VITE_BASE_URL;
            const content = baseUrl + localStorageUtil.projectInfo.path + this.datas.path;
            const aux = document.createElement("input");
            if (!aux) {
                window.$message.success("复制失败!");
                return;
            }
            aux.setAttribute("value", content);
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy");
            document.body.removeChild(aux);
            window.$message.success("复制成功!");
        },
        clickTestHandle() {
            this.isShowTestResult = true;
        },
        editLitgraphHandle() {
            CpcDrawerCtrl.open(
                {
                    component: "LitegraphLayer",
                    callBack: (data, close) => {},
                },
                { title: "编辑蓝图", styleType: "full", isMaskEvent: false }
            );
        },
    },
};
</script>

<style scoped lang="scss">
.edit-column {
    button {
        margin: 0 5px;
    }
}
</style>
